<template>
	<view class="container">
		<view class="head">
			<cu-custom style="background-color: #3D84FE; color: #fff;" bgColor="bg-blue" :isBack="true">
				<block slot="content">问题管理</block>
				<!-- <view slot="right"  @tap="goShaixuan()"><image src="../../static/icon/shaixuanwhite.png" style="width: 15px;height: 17px;"></image> </view> -->
			</cu-custom>
			<view class="projectHead">
				<view class="searchView">
					<picker :range="months" @change="monthChange" class="time uni-flex">
						{{months[monthIndex]}} 月<image class="shaixuanFont" src="../../static/icon/triangleFont.png"></image> 
					</picker>
					<input class="searchProj" type="text" placeholder="请输入项目名称" v-model="inputText" @confirm="confirm"/>
					<view class="searchFont" @click="goSearch"><image src="../../static/icon/search.png"></image> </view>
				</view>
			</view>
			<view class="swiperHead">
			  <view class="swiperItem" :class="{swpHeadActiv:currentTabIndex===index}" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" @click="CurrentTab(index)">
				<text class="swipText"> {{tab.name}}</text> <text class="swiperLine"></text>
			  </view>
			</view>
			<view class="cutLine"></view>
		</view>
		<view class="uni-list" v-show="currentTabIndex==0">
			<view class="noData" v-if="noDataShow==true">
				<view class="imgBox"> <image class="noDataImg" style="width: 284px;height: 284px;" src="../../static/nodata.png"></image></view>
				<view class="smallText">您还没有已填的月报哦~</view>
			</view>
			<view class="uni-list-cell" v-else v-for="(item,index) in news" @tap="openInfo" :data-id = "item.id">
				<view class="uni-media-list">
					<view class="uni-media-list-body">
						<view class="listContent">
							<!-- <view class="uni-flex textBtom"> -->
							<view class="titleText">{{item.num}}.{{item.projectName}}</view>
							<!-- </view> -->
							<view class="describe">问题描述： {{item.wtnr}}</view>
							<view class="infoText2">{{item.wtlx}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-list " v-show="currentTabIndex==1">
			<view class="noData" v-if="noDataShow==true">
				<view class="imgBox"> <image class="noDataImg" style="width: 284px;height: 284px;" src="../../static/nodata.png"></image></view>
				<view class="smallText">您还没有已填的月报哦~</view>
			</view>
			<view class="uni-list-cell" v-for="(item,index) in news" :key="index"
			:data-newsid="item.newsid">
				
			</view>
		</view>
		<view class="uni-list noData" v-show="currentTabIndex==2">
			<view class="noData">
				<view class="imgBox"> <image class="noDataImg" style="width: 284px;height: 284px;" src="../../static/nodata.png"></image></view>
				<view class="smallText">您还没有已填的月报哦~</view>
			</view>
			<view class="uni-list-cell" v-for="(item,index) in news" :key="index"
			:data-newsid="item.newsid">
				
			</view>
		</view>
		<view class="uni-list noData" v-show="currentTabIndex==3">
			<view class="noData">
				<view class="imgBox"> <image class="noDataImg" style="width: 284px;height: 284px;" src="../../static/nodata.png"></image></view>
				<view class="smallText">您还没有已填的月报哦~</view>
			</view>
			<view class="uni-list-cell" v-for="(item,index) in news" :key="index"
			:data-newsid="item.newsid">
				
			</view>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
				  id: "tab01",
				  name: '问题交办',
				  statistical: '1'
				}, {
				  id: "tab02",
				  name: '问题处理',
				  statistical: '2'
				},
				 {
				  id: "tab03",
				  name: '问题催办',
				  statistical: '3'
				}, {
				  id: "tab04",
				  name: '问题督办',
				  statistical: '4'
				}],
				news : [],
				total:0,
				jiankstate:1,
				guanzhustate:0,
				mapstate:1,
				currentTabIndex:0,
				noDataShow:false,
				total:0,
				num:0,
				inputText:"",
				pageNo:1,
				months:[3,4,5],
				monthIndex:0
			}
		},
		onReachBottom() {
			console.log(this.news.length);
			console.log(this.total);
			if(this.news.length<this.total){
				uni.showLoading({
					title:"加载中……"
				})
				this.pageNo+=1;
				this.jiaoban();
				setTimeout(()=>{
					uni.hideLoading()
				},2000);
			}else{
				setTimeout(()=>{
					uni.showToast({
						title:"没有数据啦~",
						icon:"none"
					})
					uni.stopPullDownRefresh()
				},1000)
			}
		},
		onLoad:function(){
			this.jiaoban();
		},
		methods: {
			CurrentTab(index){
				this.currentTabIndex = index;
				if(index==1){
					this.view();
				}
			},
			//问题交办
			jiaoban(){
				let months = this.months;
				let monthIndex = this.monthIndex;
				let month = months[monthIndex];
				let projectName = this.inputText;
				this.$http.get("/problem/v1/listQuestion.do?type=1",{
					params:{
						pageNo:this.pageNo,
						month:month,
						projectName:projectName,
					}
				}).then(res=>{
					console.log(res);
					  if(res.data.rows.length==0) {
							this.noDataShow = true;
							uni.stopPullDownRefresh()
							}else{
								this.noDataShow = false
								if(this.pageNo>1){
									let newsData = res.data.rows;
									var num = this.num;
									newsData = newsData.map((item)=>{
										num = num+1;
										this.num = num;
										return{
											id:item.id,  //id
											projectName:item.projectName,//名称
											wtlx:item.wtlx, //类型
											wtnr:item.wtnr, //文字描述
											num:num
										}
									})
									this.news = this.news.concat(newsData)
								}else{
									this.news = res.data.rows;
									this.total = res.data.total;
									 console.log(this.news);
									 var num = this.num;
									this.news = this.news.map((item) => {
									  num = num+1;
									  this.num = num
									  return {
									   id:item.id,  //id
									   projectName:item.projectName,//名称
									   wtlx:item.wtlx, //类型
									   wtnr:item.wtnr, //文字描述
									   num:num
									  };
									});	
								}
						  }
				})
			},
			openInfo(e){
				let id = e.currentTarget.dataset.id;
				console.log(id);
				uni.navigateTo({
					url:"/pages/zdwt/info?id="+id
				})
			},
			view(){
				this.$http.get("/problem/v1/questionReportByCompany.do",{
					
				}).then(res=>{
					console.log(res);
					  if(res.data=="") {
						  this.noDataShow = true
						  }else{
							   this.news = res.data.rows;
							   console.log(this.news);
							  this.news = this.news.map((item) => {
								  return {
								   newsid: item.projectId,
								   datetime: item.year+'年'+item.month+'月',
								   title: item.wtnr,
								   image_url: item.image_url,
								   source: item.wtlx,
								   comment_count: 0,
								   post_id: '',
								   month:item.month,
								   year:item.year,
								   projectName:item.projectName
								  };
								});	
								
						  }
				})
			},
				//顶部导航筛选跳转
				goShaixuan(){
					uni.navigateTo({
						url:"./shaixuan"
					})
				},
				//月份选择
				monthChange(e){
					this.monthIndex = e.detail.value;
					this.jiaoban();
				},
				goSearch(){
					 this.jiaoban();
				},
				confirm(){
					this.goSearch();
					uni.hideKeyboard();
				}
		}
	}
</script>

<style>
	@import "../month/uni.css";
	@import "zdwtindex.css";
</style>
